<template>
    <view class="container">
        <!-- 头部 -->
        <view class="header">
            <text class="title">轮播图详情</text>
            <view class="action-buttons">
                <button class="action-btn status-btn" :class="bannerData.status === 1 ? 'disable' : 'enable'"
                    @click="handleStatusToggle">
                    {{ bannerData.status === 1 ? '禁用' : '启用' }}
                </button>
                <button class="action-btn edit-btn" @click="handleEdit">编辑</button>
                <button class="action-btn delete-btn" @click="handleDelete">删除</button>
            </view>
        </view>

        <!-- 详情内容 -->
        <view class="content">
            <view class="section">
                <text class="section-title">基本信息</text>
                <view class="info-item">
                    <text class="label">轮播图标题：</text>
                    <text class="value">{{ bannerData.title || '--' }}</text>
                </view>
                <view class="info-item">
                    <text class="label">链接类型：</text>
                    <text class="value">{{ getLinkTypeText(bannerData.link_type) }}</text>
                </view>
                <view class="info-item">
                    <text class="label">跳转链接：</text>
                    <text class="value">{{ bannerData.link_value || '--' }}</text>
                </view>
                <view class="info-item">
                    <text class="label">排序：</text>
                    <text class="value">{{ bannerData.sort || 0 }}</text>
                </view>
                <view class="info-item">
                    <text class="label">状态：</text>
                    <text class="value" :class="bannerData.status === 1 ? 'active' : 'inactive'">
                        {{ bannerData.status === 1 ? '启用' : '禁用' }}
                    </text>
                </view>
            </view>

            <view class="section">
                <text class="section-title">图片预览</text>
                <image v-if="bannerData.image && bannerData.image.url" :src="bannerData.image.url" class="banner-image" mode="aspectFill"
                    @click="handleImagePreview" />
                <view v-else class="no-image">暂无图片</view>
            </view>

            <view class="section">
                <text class="section-title">时间信息</text>
                <view class="info-item">
                    <text class="label">创建时间：</text>
                    <text class="value">{{ formatDate(bannerData.create_date) }}</text>
                </view>
                <view class="info-item">
                    <text class="label">更新时间：</text>
                    <text class="value">{{ formatDate(bannerData.update_date) }}</text>
                </view>
            </view>
        </view>

        <!-- 图片预览弹窗 -->
        <uni-popup ref="imagePopup" type="center">
            <view class="image-preview">
                <image :src="bannerData.image && bannerData.image.url ? bannerData.image.url : ''" mode="aspectFill" class="preview-image" />
                <button class="close-btn" @click="closePreview">关闭</button>
            </view>
        </uni-popup>

        <!-- 删除确认弹窗 -->
        <uni-popup ref="deletePopup" type="dialog">
            <uni-popup-dialog type="warn" title="确认删除" content="确定要删除这个轮播图吗？此操作不可恢复！" :before-close="true"
                @confirm="confirmDelete" @close="cancelDelete"></uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const bannerData = ref({})
const imagePopup = ref(null)
const deletePopup = ref(null)

// 格式化日期
const formatDate = (timestamp) => {
    if (!timestamp) return '--'
    const date = new Date(timestamp)
    return date.toLocaleString('zh-CN')
}

// 获取链接类型文本
const getLinkTypeText = (linkType) => {
    // 将linkType转换为数字进行比较，兼容字符串和数字类型
    const type = parseInt(linkType)
    switch (type) {
        case 0:
            return '无链接'
        case 1:
            return '内部页面'
        case 2:
            return '外部链接'
        default:
            return '未知'
    }
}

// 图片预览
const handleImagePreview = () => {
    if (bannerData.value.image && bannerData.value.image.url) {
        imagePopup.value.open()
    }
}

const closePreview = () => {
    imagePopup.value.close()
}

// 状态切换
const handleStatusToggle = async () => {
    try {
        uni.showLoading({
            title: '处理中...'
        })

        const result = await uniCloud.callFunction({
            name: 'food-banners',
            data: {
                action: 'update-banner',
                data: {
                    bannerId: bannerData.value._id,
                    bannerData: {
                        status: bannerData.value.status === 1 ? 0 : 1,
                        update_date: Date.now()
                    }
                }
            }
        })
        if (result.result.code === 200) {
            // 更新本地状态
            bannerData.value.status = bannerData.value.status === 1 ? 0 : 1
            bannerData.value.update_date = Date.now()
            uni.showToast({
                title: bannerData.value.status === 1 ? '已启用' : '已禁用',
                icon: 'success'
            })

        } else {
            uni.showToast({
                title: '操作失败',
                icon: 'none'
            })
        }
    } catch (error) {
        console.error('状态切换失败:', error)
        uni.showToast({
            title: '操作失败',
            icon: 'none'
        })
    } finally {
        uni.hideLoading()
    }
}

// 编辑
const handleEdit = () => {
    uni.navigateTo({
        url: `/pages/banners/edit?id=${bannerData.value._id}`
    })
}

// 删除
const handleDelete = () => {
    deletePopup.value.open()
}

// 确认删除
const confirmDelete = async () => {
    try {
        uni.showLoading({
            title: '删除中...'
        })
        const result = await uniCloud.callFunction({
            name: 'food-banners',
            data: {
                action: 'delete-banner',
                data: {
                    bannerId: bannerData.value._id
                }
            }
        })

        if (result.result.code === 200) {
            uni.showToast({
                title: '删除成功',
                icon: 'success'
            })

            // 延迟返回上一页
            setTimeout(() => {
                uni.navigateBack()
            }, 1500)
        } else {
            uni.showToast({
                title: '删除失败',
                icon: 'none'
            })
        }
    } catch (error) {
        console.error('删除失败:', error)
        uni.showToast({
            title: '删除失败',
            icon: 'none'
        })
    } finally {
        uni.hideLoading()
    }
}

// 取消删除
const cancelDelete = () => {
    deletePopup.value.close()
}

// 加载数据
const loadData = async () => {
    try {
        uni.showLoading({
            title: '加载中...'
        })

        const result = await uniCloud.callFunction({
            name: 'food-banners',
            data: {
                action: 'get-banner-detail',
                data: {
                    bannerId: bannerData.value._id
                }
            }
        })

		console.log('获取轮播图详情结果:', result)

        if (result.result.code === 200) {
            bannerData.value = result.result.data
            uni.hideLoading()
        } else {
            uni.hideLoading()
            uni.showToast({
                title: '获取轮播图详情失败',
                icon: 'none'
            })

            // 1.5秒后返回上一页
            setTimeout(() => {
                uni.navigateBack()
            }, 1500)
        }
    } catch (error) {
        console.error('加载数据失败:', error)
        uni.hideLoading()
        uni.showToast({
            title: '获取轮播图详情失败',
            icon: 'none'
        })

        // 1.5秒后返回上一页
        setTimeout(() => {
            uni.navigateBack()
        }, 1500)
    }
}

// 页面加载
onLoad((options) => {
    if (options.id) {
        bannerData.value._id = options.id
        loadData()
    }
})
</script>

<style lang="scss" scoped>
.container {
    padding: 20rpx;
    min-height: 100vh;
    background-color: #f5f5f5;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
    }

    .action-buttons {
        display: flex;
        gap: 15rpx;

        .action-btn {
            border: none;
            border-radius: 10rpx;
            padding: 15rpx 25rpx;
            font-size: 26rpx;
            font-weight: bold;

            &.status-btn {
                &.enable {
                    background-color: #52c41a;
                    color: white;
                }

                &.disable {
                    background-color: #faad14;
                    color: white;
                }
            }

            &.edit-btn {
                background-color: #007aff;
                color: white;
            }

            &.delete-btn {
                background-color: #ff4d4f;
                color: white;
            }
        }
    }
}

.content {
    background-color: white;
    border-radius: 20rpx;
    padding: 30rpx;
}

.section {
    margin-bottom: 40rpx;

    &:last-child {
        margin-bottom: 0;
    }

    .section-title {
        display: block;
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
        padding-bottom: 10rpx;
        border-bottom: 2rpx solid #f0f0f0;
    }
}

.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15rpx;

    .label {
        font-size: 28rpx;
        color: #666;
        min-width: 150rpx;
    }

    .value {
        font-size: 28rpx;
        color: #333;
        flex: 1;

        &.active {
            color: #52c41a;
            font-weight: bold;
        }

        &.inactive {
            color: #999;
        }
    }
}

.banner-image {
    width: 300rpx;
    height: 200rpx;
    border-radius: 10rpx;
    background-color: #f5f5f5;
}

.no-image {
    width: 300rpx;
    height: 200rpx;
    border-radius: 10rpx;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 26rpx;
}

.image-preview {
    background-color: white;
    border-radius: 20rpx;
    padding: 40rpx;

    .preview-image {
        width: 600rpx;
        height: 400rpx;
        border-radius: 10rpx;
    }

    .close-btn {
        margin-top: 30rpx;
        background-color: #007aff;
        color: white;
        border: none;
        border-radius: 10rpx;
        padding: 20rpx 30rpx;
    }
}
</style>